<style lang="less" scoped>
  .all{
  }
  li {
    list-style: none;
  }
  .scrollTouch {
    overflow: scroll;
  }
  .country{
    border-bottom: 1px solid #E9E9E9;
    box-sizing: border-box;
    padding: 0 10px;
    width:100%;
    overflow-x: scroll;
  }
  .country ul{
    display: block;
    /*padding: 10px 0 0 0;*/
    /*height:40px;*/
  }
  .country ul li{
    display: inline-block;
    /*width:50px;*/
    font-size: 12px;
    color: #a4a3a9;

  }
  .country ul li a{
    color: #a4a3a9;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding:4px 0;
    float: left;
  }
  .country ul li span{
    float: right;
  }
  @media screen and (max-width: 320px) {
    .country ul li span{
      margin-right: 6px;
      margin-top: 4px;
    }
    .paixu ul{
      padding:0 10px!important;
    }
    .zuhe > div > li > a{
      padding:14px 10px!important;
    }
    .zuhe div > li .left .bottom h5{
      padding: 0 !important;
    }
  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .country ul li span{
      margin-right: 8px;
      margin-top: 6px;
    }
  }
  @media screen and (min-width: 376px){
    .country ul li span{
      margin-right: 8px;
      margin-top: 5px;
    }
  }
  .country ul li:last-child span{
    display: none;
  }
  .country ul li a b{
    width:100%;
    height:3px;
    background: #4b67fb;
    /*margin-top: 4px;*/
    position: absolute;
    bottom:0;
    background: linear-gradient(to right, #6379F8 0%,#91A5F8 100%);
  }
  .country ul li a{
    opacity: 0.5;
  }
  .country ul li a.color{
    opacity: 1;
  }
  .country ul li a.color p{
    color: #4b67fb;
  }
  .country ul li a{
    /*flex-grow:10;*/
    /*margin-right: 10px;*/
    text-align:left;
  }
  .paixu ul{
    display: flex;
    flex-direction: row;
    padding: 0 20px;
  }
  .country-box {
  display: -webkit-box;
  width: 100%;
  position: relative;
  overflow: scroll;
  flex-direction: row;
  .country-list {
    display: flex;
    padding: 0 0.2rem;
    a {
      display: flex;
      font-size: 1.2rem;
      justify-content: center;
      width: 4.2rem;
      align-items: center;
      padding: 0 0.5rem;
      color: rgba(102,102,102,0.5);
      margin: 0.5rem 0;
      position: relative;
      letter-spacing: 2px;
    }
    a:before {
      content: '';
      height: 12px;
      width: 1px;
      position: absolute;
      top: 5px;
      background: rgba(102, 102, 102, 0.3);
      right: 0;
    }
    a:before:nth-last-child {
      background: white;
    }
    a:last-child {
      border-right: 0px solid white;
    }
  }
}

.country-box::-webkit-scrollbar {
  height: 2px;
}

.bottom-line {
  position: absolute;
  background: #7590FF;
  height: 3px;
  width: 2.5rem;
  margin: 0 1.2rem;
  top: 26px;
  transition: transform 0.3s;
  border-radius: 5px;
}

  @media screen and (max-width: 320px) {

  }
  @media screen and (max-width:375px) and (min-width:321px) {
    .country-box {
      a {
        // font-size: 1.4rem !important;
        width: 5.8rem !important;
      }
      .bottom-line {
        width: 2.9rem;
        margin: 0 2.1rem;
        top: 27px;
      }
    }
  }
  @media screen and (min-width: 376px){
    .country-box {
      a {
        // font-size: 1.6rem !important;
        width: 6.2rem !important;
      }
      .bottom-line {
        width: 3rem;
        margin: 0 2.24rem;
        top: 27px;
      }
    }
  }

.active {
  color: #4b67fb !important;
}


  .paixu ul li{
    flex: 3;
    display: flex;
    align-items: center;
    /*color: #7F7A8E;*/
    padding: 6px 0;
    justify-content: center;
  }
  .paixu ul li:first-child{
    flex: 5;
    justify-content: flex-start;
  }
  .zuhe div{
    display: flex;
    flex-direction: column;
  }
  .color_red {
    color: #4b67fb
  }
  .zuhe div>li{
    color: #7F7A8E;
    border-bottom: 1px solid #E9E9E9;
    background: white;
  }
  .zuhe div>li>a{
    /*width:100%;*/
    height:100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    position: relative;
    padding: 14px 20px;
  }
  .zuhe div>li>a>.tuijian{
    position: absolute;
    bottom: 0;
    right:10px;
    color: #ffffff;
    opacity: 0.5;
  }
  .zuhe div>li>a>.tuijian h5{
    color: #ffffff;
  }
  .zuhe div>li>a>div{
    flex: 3;
  }
  .zuhe div>li>a>div:first-child{
    flex: 5;
  }
  .zuhe div>li.choose{
    background: linear-gradient(to right, #6379F8 0%,#91A5F8 100%);
    color: #ffffff;
    font-weight:400;
  }
  .zuhe div>li.choose a p{
    color: #ffffff!important;
  }
  .zuhe div>li.choose .bottom h5{
    color: #ffffff!important;
    border:1px solid #ffffff!important;
    border-radius: 4px;
    padding: 0 6px;
  }
  .zuhe div>li .left .bottom h5{
    border:1px solid #FE7A4A;
    border-radius: 4px;
    padding: 0 6px;
    color: #FE7A4A;
  }
  .zuhe div>li.choose h2{
    color: #ffffff;
  }
  .zuhe div>li.choose h3{
    color: #ffffff;
  }
  .zuhe div>li.choose h3 h4{
    color: #ffffff;
  }
  .zuhe div>li.choose>.left>.bottom>ul>li>.red{
    color: #ffffff;
  }
  .zuhe div>li>a>.left{
    display: flex;
    flex-direction: column;
  }
  .zuhe div>li>a>.left>.bottom>ul{
    display: flex;
    flex-direction: row;
  }
  .zuhe div>li>a>.left>.bottom>ul>li{
    /*border-right:1px solid #E9E9E9;*/
    padding:0 8px 0 8px;
  }
  .zuhe div>li>a>.left>.bottom>ul>li:first-child{
    padding-left: 0;
  }
  .zuhe div>li>a>.left>.bottom>ul>li:last-child{
    border-right: none;
  }
  /*.zuhe>ul>li>.left>.bottom>ul>li>h4{*/
  /*color: #7F7A8E;*/
  /*}*/
  /*.zuhe>ul>li>a>.right>h3>h4{*/
    /*margin-top: 5px;*/
  /*}*/

  /*排序*/
  .paixu ul li div{
    margin-left: 2px;
  }
  .paixu ul li div h5:first-child{
    margin-bottom: -6px;
  }
  .paixu ul li div h5:last-child{
    margin-top: -4px;
  }
  .blurcolor {
    color: #4b67fb !important;
  }
  .scrollBtnActive {
    color: #4b67fb !important;
  }
  .right h3 {
    display: inline;
  }
</style>

<template>
  <div class="all">
    <v-networkerr
      v-on:reload="networkReload()"
      v-if="networkState === 'offline'" ></v-networkerr>
    <div v-else class="main">
      <div class="paixu">
        <ul>
          <li><p>综合排序</p></li>
          <li>
            <p @click="sortFunc('mr')">月收益

            <i style="font-size: 0.8em;margin-left: 2px; color: #cdcdcd" v-if="sortControl.mr">
            <svg class="icon"
                 aria-hidden="true">
              <use :xlink:href="triangleDown"></use>
            </svg>
            </i>
            <i style="font-size: 0.8em;margin-left: 2px; color: #cdcdcd" v-if="!sortControl.mr">
            <svg class="icon"
                 aria-hidden="true">
              <use :xlink:href="triangleUp"></use>
            </svg>
            </i>
            </p>
            <div>
            </div>
          </li>
          <li>
            <p @click="sortFunc('yr')">年收益
            <i style="font-size: 0.8em;margin-left: 2px; color: #cdcdcd" v-if="sortControl.yr">
            <svg class="icon"
                 aria-hidden="true">
              <use :xlink:href="triangleDown"></use>
            </svg>
            </i>
            <i style="font-size: 0.8em;margin-left: 2px; color: #cdcdcd" v-if="!sortControl.yr">
            <svg class="icon"
                 aria-hidden="true">
              <use :xlink:href="triangleUp"></use>
            </svg>
            </i>
            </p>
            <div>
            </div>
          </li>
        </ul>
      </div>
      <div class="zuhe">
        <v-pulldown :rotate="scrollTop" :pulldownStatus="pulldownStatus.pulldownStatus"></v-pulldown>
        <scroller
          lock-x
          v-model="pulldownStatus"
          usePulldown
          @on-pulldown-loading="reloadData"
          @on-scroll="scroll"
          :pulldownConfig="$config.pullDownConfig"
          height="-175px"
          ref="scrollBar">
        <!-- <scroller
          lock-x
          height="-175px"
          ref="scrollBar"> -->
        <div slot="default"
          class="scrollTouch">
          <li class="choose" v-for="(all,index) in alls" :key="all.id" v-if="all.recommend===true" >
            <a @click="routeSub(index)">
              <div class="left">
                <div class="top"><h3>{{all.labels.country}}·{{all.labels.index_name}}</h3></div>
                <div class="bottom">
                  <ul>
                    <li>
                      <h5 v-if="all.labels!=={}">{{all.labels.size_name}}</h5>
                    </li>
                    <li>
                      <h5 v-if="all.labels!=={}">{{all.labels.feature
                        }}</h5>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="right">
                <h2>{{all.mr | percent}}<h3>%</h3></h2>
              </div>
              <div class="right">
                <h2>{{all.yr | percent}}<h3>%</h3></h2>
              </div>
              <div class="tuijian"><h5>根据您的风险偏好与投资金额,我们为您推荐</h5></div>
            </a>
          </li>
          <li v-for="(all,index) in alls" v-if="all.labels" :key="all.id">
            <a  @click="routeSub(index)">
              <div class="left">
                <div class="top">
                  <h3 v-if="all.labels">
                    {{all.labels.country}}·{{all.labels.index_name}}
                  </h3>
                </div>
                <div class="bottom">
                  <ul>
                    <li>
                      <h5 v-if="all.labels">{{all.labels.size_name}}</h5>
                    </li>
                    <li>
                      <h5 v-if="all.labels">{{all.labels.feature}}</h5>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="right">
                <h2 v-if="all.mr && all.mr>0.0001" style="color: #F84949;">{{all.mr | percent}}<h3 style="color: #F84949;">%</h3></h2>
                <h2 v-else-if="all.mr && all.mr<-0.0001" style="color: #093;">{{all.mr | percent}}<h3 style="color: #093;">%</h3></h2>
                <h2 v-else="all.mr && all.mr<=0.0001 && all.mr>=-0.0001">{{all.mr | percent}}<h3>%</h3></h2>
              </div>
              <div class="right">
                <h2 v-if="all.yr && all.yr>0.0001" style="color: #F84949;">{{all.yr | percent}}<h3 style="color: #F84949;">%</h3></h2>
                <h2 v-else-if="all.yr && all.yr<-0.0001" style="color: #093;">{{all.yr | percent}}<h3 style="color: #093;">%</h3></h2>
                <h2 v-else="all.yr && all.yr===0">{{all.yr | percent}}<h3>%</h3></h2>
              </div>
            </a>
          </li>
        </div>
        </scroller>
      </div>
    </div>
  </div>
</template>

<script>
  import host from '../../config.js'
  import { sort, sortControl } from '../../plugins/sort'
  import plugins from '../../plugins/'
  import { Scroller } from 'vux'

  export default {
    components: {
      Scroller
    },
    data () {
      return {
        pulldownStatus: {
          pulldownStatus: 'default',
          pullupStatus: 'default'
        },
        showPullDown: false,
        alls: [],
        scrollTop: 0,
        blurcolor: 'blurcolor',
        sortControl: {
          yr: 0,
          mr: 0
        },
        country: [],
        triangleUp: '#icon-paixu',
        triangleDown: '#icon-paixu1',
        networkState: 'online',
        setScrollBarStateDefault: null,
        isBackTop: false
      }
    },
    created () {
      var localStorage = window.localStorage
      this.findCountry()
      this.findStragery()
    },
    activated () {

    },
    watch: {
      '$store.state.reload': function (val) {
        if (this.$route.path === '/qstrategy/all') {
          if (this.isBackTop) return
          let isTop = document.getElementsByClassName('xs-container')[0].style.transform.indexOf('translateY(0px)')
          if (this.pulldownStatus.pulldownStatus === 'loading') return
          if (isTop !== 16 && isTop !== 0) {
            this.$refs.scrollBar.reset({top: 0}, 300, 'ease')
            this.isBackTop = true
            setTimeout(() => {
              this.isBackTop = false
              this.$refs.scrollBar.reset({top: 0})
            }, 300)
          }
        }
      }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        document.getElementsByClassName('country-box')[0].scrollLeft = vm.$store.state.countryboxscroll
      })
    },
    beforeRouteLeave (to, from, next) {
      // from.meta.scroll = document.body.scrollTop
      if (this.isBackTop) return
      this.$store.state.countryboxscroll = document.getElementsByClassName('country-box')[0].scrollLeft
      next()
    },
    activated () {
      this.$store.state.strategyActive = 0
      this.$nextTick(() => {
        this.$refs.scrollBar.reset()
      })
    },
    methods: {
      networkReload () {
        this.findStrageryByNetwork()
        this.$store.state.reloadState = !this.$store.state.reloadState
      },
      scroll (scrollTop) {
        this.scrollTop = scrollTop.top
      },
      reloadData () {
        if (this.setScrollBarStateDefault === null) {
          this.setScrollBarStateDefault = setTimeout(() => {
            this.pulldownStatus.pulldownStatus = 'default'
            this.setScrollBarStateDefault = null
            this.$store.state.reloadState = !this.$store.state.reloadState
            this.findStrageryByNetwork()
          }, 1000)
          return
        }
        clearTimeout(this.setScrollBarStateDefault)
        this.setScrollBarStateDefault = setTimeout(() => {
          this.pulldownStatus.pulldownStatus = 'default'
          this.setScrollBarStateDefault = null
          this.findStrageryByNetwork()
        }, 1000)
      },
      sortFunc (value) {
        Object.keys(this.sortControl).forEach((key) => {
          this.sortControl[key] = 0
        })
        this.sortControl = sortControl(this.sortControl, value)
        this.$nextTick(() => {
          this.alls = sort(this.alls, value, this.sortControl[value] === 1 ? 'sort' : 'reverse')
        })
      },
      findCountry () {
        window.localStorage.getItem('countrylist') ? this.findCountryByCache() : this.findCountryByNetwork()
      },
      findCountryByNetwork () {
        this.baseService.get('strategy/country').then((res) => {
          this.$plugins.cacheControl.setCache('countrylist', res.data)
          res.data.forEach((item, idx) => {
            item.active = false
          })
          this.country = res.data
          this.$nextTick(() => {
            this.scrollBtnWidth = this.$refs.scrollBtn[0].offsetWidth
          })
          this.country.forEach((item, idx) => {
            if (this.$route.params.id === item.c) {
              this.$set(this, 'coordinate', this.countryPoint[idx].point)
              this.seeDetail(item.c, idx)
              this.$set(this.$store.state, 'qstrageryByCountry', idx)
              if (idx === 0) {
                document.getElementsByClassName('point')[0].className = 'point pointActive'
              }
              this.$store.state.qstrageryDetail = true
            }
          })
        })
      },
      findCountryByCache () {
        this.$plugins.cacheControl.getCache('countrylist', this.$config.cacheTime.onlineCache).then((res) => {
          res.data.forEach((item, idx) => {
            item.active = false
          })
          this.country = res.data
          this.$nextTick(() => {
            this.scrollBtnWidth = this.$refs.scrollBtn[0].offsetWidth
          })
          this.country.forEach((item, idx) => {
            if (this.$route.params.id === item.c) {
              this.$set(this, 'coordinate', this.countryPoint[idx].point)
              this.seeDetail(item.c, idx)
              this.$set(this.$store.state, 'qstrageryByCountry', idx)
              if (idx === 0) {
                document.getElementsByClassName('point')[0].className = 'point pointActive'
              }
              this.$store.state.qstrageryDetail = true
            }
          })
        }).catch(() => {
          this.findCountryByNetwork()
        })
      },
      gotoPage (id, idx) {
        idx === 0 ? '' : this.$router.push(`/qstragerybycountry/${id}`)
      },
      findStrageryByNetwork () {
        this.baseService.get('/strategy/listView').then((res) => {
          this.networkState = 'online'
          Object.keys(this.sortControl).forEach((key) => {
            this.sortControl[key] = 0
          })
          setTimeout(() => {
            this.$refs.scrollBar.donePulldown()
          }, 1000)
          if (res.code === 6006) {
            this.$router.push({'path':'/login'})
          } else {
            this.alls = res.data
            this.$nextTick(() => {
              this.$refs.scrollBar.reset()
            })
            plugins.cacheControl.setCache('alls', this.alls)
          }
        }).catch((err) => {
          if (err === 'timeout') {
            this.$plugins.cacheControl.getCache('alls', this.$config.cacheTime.offlineCache).then((res) => {
              this.alls = res.data
              this.networkState = 'online'
              this.$nextTick(() => {
                this.$refs.scrollBar.reset()
              })
            }).catch((err) => {
              this.networkState = 'offline'
            })
          }
        })
      },
      findStrageryByCache (min) {
        this.$plugins.cacheControl.getCache('alls', min).then((res) => {
          this.networkState = 'online'
          this.alls = res.data
          this.$nextTick(() => {
            this.$refs.scrollBar.reset()
          })
        }).catch((err) => {
          if (!this.$store.state.networkState) this.networkState = 'offline'
          this.findStrageryByNetwork()
        })
      },
      findStragery () {
        if (!this.$store.state.networkState) {
          this.$plugins.networkErr()
          this.findStrageryByCache(this.$config.cacheTime.offlineCache)
          return
        }
        localStorage.getItem('alls') ? this.findStrageryByCache(this.$config.cacheTime.onlineCache) : this.findStrageryByNetwork()
      },
      routeSub (index) {
        if(window.localStorage.getItem('token') === 'null' || !window.localStorage.getItem('token')) {
          this.$router.push('/login')
        }else{
          this.$router.push({path:'/subscribe/',query:{id: this.alls[index].id}})
        }
      }
    },
    filters: {
      percent (data) {
        return (parseFloat(data)*100).toFixed(2)
      }
    }
  }
</script>
